import Vue from 'vue'
import Component from 'vue-class-component'
import './productStyle.css'
import {Watch} from 'decorators'

@Component({
  props: {
    product: Object
  }
})
export default class ProductItemClass extends Vue {
  myproduct = {}
  handlerPush() {
    this.$router.push({name: 'productDetails', params: {productId: this.product.productId}})
  }

  created () {
    this.myproduct = this.product
  }

  // @Watch('product', {immediate: true, deep: true})
  // onProductChange (product) {
  //   this.myproduct = product
  // }

  render () {
    return (
      <div class = 'productItemStyle' onClick={this.handlerPush}>
        <img src = {this.myproduct.productCover}/>
        <div>
          <p style='overflow:hidden;height:20px'>品牌 :{this.myproduct.productName}</p>
          <p>价格 :{this.myproduct.currencyLogo}{this.myproduct.showPrice}</p>
           {this.product.remainCount ? <font style='font-size: .10em;color:red'>剩余{this.product.remainCount}件</font> : ''}
          <h1>'123'</h1>
        </div>
        <mt-button style="position:absolute;right:20px;bottom:15px;" size='small' type="default">{this.myproduct.status === '0' ? '上架' : '下架'}</mt-button>
      </div>
    )
  }
}
